<template>
	<view class="news-list-container">
		<scroll-view scroll-y="true" @scrolltolower="loadMore" style="height: calc(100% - 100rpx);">
			<div class="list">
				<div class="items" v-for="(item,index) in list " :key="index" @click="goToDetail(item.id)">
					<div class="icon">
						<image :src="item.thumb" mode="aspectFill"></image>
					</div>
					<div class="r">
						<h3>{{item.title}}</h3>
						<p>{{item.description}}</p>
					</div>
				</div>
			</div>
		</scroll-view>

	</view>
</template>

<script>
	import {
		request
	} from '@/utils/request.js'
	export default {
		data() {
			return {
				type: 0,
				page: 1,
				hasMore: true,
				list: [

				]
			};
		},
		onLoad() {
			this.getList()
		},
		methods: {
			async getList() {
				try {
					const res = await request({
						url: 'site/news-list',
						method: 'get',
						data: {
							page: this.page,
						}
					})
					console.log(res)
					if (res.status == 200) {
						console.log(res.data)
						if (res.data.list.length >= 20) {
							this.page++
						} else {
							this.hasMore = false
						}
						this.list = [...this.list, ...res.data.list]
					}
				} catch (error) {
				}
			},
			changeTab(index) {
				if (index != this.type) {
					this.page = 1;
					this.list = []
					this.hasMore = true
					this.type = index;
						this.getList()
					
				}
			},
			loadMore() {
				if (this.hasMore) {
					this.page = 1;
					this.list = []
					this.hasMore = true
						this.getList()

				}

			},
			goToDetail(id) {
				uni.navigateTo({
					url: `/pages/news/detail?id=${id}`
				});
			}
		}
	};
</script>

<style lang="scss">
	.tabT {
		height: 80rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		display: flex;

		.items {
			line-height: 80rpx;
			width: 50%;
			font-size: 32rpx;
			text-align: center;
			border-bottom: 2px solid transparent;

			&.active {
				border-bottom: 2px solid #4a90e2;
			}
		}
	}

	page {
		background-color: #f2f2f2;
	}

	.news-list-container {
		padding: 20rpx;
		box-sizing: border-box;
		height: 100vh;
	}

	.news-list-header {
		text-align: center;
		margin-bottom: 20rpx;
	}

	.header-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.news-item {
		display: flex;
		align-items: center;
		background-color: white;
		border-radius: 8rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
	}

	.news-image {
		width: 120rpx;
		height: 120rpx;
	}

	.news-image image {
		width: 100%;
		height: 100%;
	}

	.news-content {
		padding: 20rpx;
	}

	.news-title {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 10rpx;
	}

	.news-summary {
		font-size: 28rpx;
		color: #666;
	}
	.list {
		.items {
			width: 100%;
			background-color: #fff;
			padding: 10rpx 30rpx;
			display: flex;
			box-sizing: border-box;
			align-items: center;
			margin-bottom: 20rpx;
	
			.icon {
				width: 180rpx;
				height: 180rpx;
				flex-shrink: 0;
				margin-right: 30rpx;
	
				image {
					width: 100%;
					height: 100%;
				}
			}
	
			.r {
				flex: 1;
	
				h3 {
					font-size: 32rpx;
				}
	
				p {
					font-size: 26rpx;
					color: #333;
					overflow: hidden;
					text-overflow: ellipsis;
					word-break: break-word;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					margin-top: 20rpx;
				}
			}
		}
	}
</style>